<template>
  <Layout>
    <!-- 主内容区域 -->
    <template #main-content>
      <div class="flex items-center justify-center flex-1 relative">
        <div class="max-w-3xl w-full">
          <div class="text-center mb-10">
            <div class="flex items-center justify-center mb-3">
              <SvgIcon name="ai-robot-logo" customSvgCss="w-10 h-10 text-gray-700 mr-3" />
              <h2 class="text-2xl text-gray-800">我是小满AI机器人，很高兴见到你！</h2>
            </div>
            <p class="text-gray-500">我可以帮你写代码、写作各种创意内容，请把你的任务交给我吧~</p>
          </div>

          <ChatInputBox v-model="userMessgae" @sendMessage="sendMessage" />
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import { newChat } from '@/api/request'
import ChatInputBox from '@/components/ChatInputBox.vue'
import SvgIcon from '@/components/SvgIcon.vue'
import Layout from '@/layouts/Layout.vue'
import router from '@/router'
import { ref, watch } from 'vue'

defineOptions({
  name: 'ChatIndex',
})

const userMessgae = ref('')

watch(userMessgae, (newText) => {
  console.log(`子组件传递的新值: ${newText}`)
})

const sendMessage = (payload) => {
  if (!userMessgae.value.trim()) return

  console.log('选中的模型：', payload.selectedModel)
  console.log('是否联网搜索：', payload.isNetWork)

  const msg = userMessgae.value.trim()
  console.log(`用户发送的消息：${msg}`)

  newChat(msg).then((res) => {
    if (res.data.success) {
      router.push({
        name: 'ChatPage',
        params: {
          chatId: res.data.uuid,
        },
        state: {
          firstMessage: msg,
        },
      })
    }
  })
}
</script>
